import { useAliyunCaptcha } from '@/hooks/useAliyunCaptcha'
import type { VerifyResult } from '@/hooks/useAliyunCaptcha'
import { useCallback, useEffect, useState } from 'react'
import './captcha.css'

export const EmbedCaptcha = ({
    onResultUpdate,
}: {
    onResultUpdate: (result?: VerifyResult) => void
}) => {
    const [captchaOptions] = useState<Partial<InitAliyunCaptchaOptions>>({
        mode: 'embed',
    })
    const onCaptchaBizCallback = useCallback((res: boolean) => {
        console.log('🐞 => EmbedCaptcha => res:', res)
    }, [])

    const { verifyResult } = useAliyunCaptcha({
        onBizResultCallback: onCaptchaBizCallback,
        options: captchaOptions,
    })

    useEffect(() => {
        onResultUpdate(verifyResult)
    }, [verifyResult, onResultUpdate])

    return <div id="captcha-element" style={{ display: 'initial' }} />
}
